<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>@功能实现</title>
    <link rel="stylesheet" type="text/css" href="./css/chat_at.css">
    <style type="text/css">
        #input {
            width: 610px;
            height: 130px;
            position: relative;
            margin: 100px auto;
        }

        .same {
            display: inline-block;
            position: absolute;
            overflow-x: hidden;
            overflow-y: auto;
            outline: none;
            resize: none;
            white-space: pre-wrap;
            cursor: auto;
            color: rgb(128, 128, 128);
            width: 600px;
            height: 100px;
            top: 20px;
            padding: 4px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 18px;
            border: 1px solid #fa7d3c;
            font-family: Arial, 'Microsoft YaHei';
        }

        .but {
            width: 180px;
            margin-left: 40%;
            margin-bottom: 4px;
            padding: 3px;
            color: #fa7d3c;
            border-color: #fa7d3c;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div id="input">
        <textarea id="textarea" class="same" placeholder="说点什么吧"></textarea>
    </div>

    <button class="but" type="button" onclick="initAt()">初始化@</button>
    <button class="but" type="button" onclick="unsetAt()">卸载@</button>
    <button class="but" type="button" onclick="isRun()">@是否正在监听</button>
    <button class="but" type="button" onclick="atPopisShow()">@列表pop是否正在显示</button>
    <button class="but" type="button" onclick="getAtObject()">获取@对象</button>

    <script type="text/javascript" src="./js/chat_at.js"></script>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

        window.onload = function () {
            // 初始化@功能
            initAt();
        }

        /**
         * 获取@的对象
         */
        function getAtObject() {
            var inputValue = textarea.value;
            console.log("inputValue: " + inputValue);

            var atObjectArr = ChatAt.getAtData();
            console.log("atObjectArr: ");
            console.log(atObjectArr);
        }

        /**
         * 初始化@
         */
        function initAt() {
            if (ChatAt.atIsRun()) {
                console.log('@功能正在运行, 无需初始化');
                return false;
            }
            // 初始化@功能
            ChatAt.initAt("textarea", [{
                id: 1,
                name: "张三",
                remarks: "老张",
            }, {
                id: 1,
                name: "李四",
                remarks: "老李",
            }, {
                id: 1,
                name: "王五",
                remarks: "老王",
            }, {
                id: 1,
                name: "赵六",
                remarks: "老赵",
            }, {
                id: 1,
                name: "陈七",
                remarks: "老陈",
            }, {
                id: 1,
                name: "刘八",
                remarks: "老刘",
            }]);
            console.log('@功能初始化成功');
        }

        /**
         * 停止运行@
         */
        function unsetAt() {
            if (!ChatAt.atIsRun) {
                console.log('@功能未运行, 无法关闭');
                return false;
            }
            // 初始化@功能
            var result = ChatAt.unsetAt();
            console.log('@停止运行成功', result);
        }

        /**
         * @是否正在运行
         */
        function isRun() {
            var result = ChatAt.atIsRun();
            console.log(result == true ? '@正在运行' : '@没有运行', result);
        }

        /**
         * @选项是否显示
         */
        function atPopisShow() {
            var result = ChatAt.atPopisShow();
            console.log(result == true ? '@选项正在显示' : '@选项没有显示', result);
        }
    </script>
</body>

</html>